<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimun-scale=1.0,maximum-scale=5.0">
    <meta name="description" content="Listen音乐,是信息与人工智能学院的安同学用来练手的音乐网站">
    <meta name="keywords" content="Listen音乐,是信息与人工智能学院的安同学用来练手的音乐网站">
    <link rel="icon" href="./imgs/logo.png">
    <link rel="stylesheet" href="./CSS/index.css">
    <title>Listen音乐</title>
</head>
<style>

</style>

<body background="./imgs/bg.gif">
    <!-- 头部 -->
    <div class="header">

        <!-- 侧边栏 -->
        <div id="sidebar">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
            <a href="#">我的</a>
            <a href="#">消息</a>
            <a href="#">设置</a>
            <a href="./版权所有/copyright.html">版权所有</a>
            <a href="./关于Listen音乐/关于Listen音乐.html">关于Listen音乐</a>
            <a href="http://www.andiscuss.cn:8050/">Listen音乐在线版</a>
        </div>

        <div id="main">
            <span style="font-size:30px;cursor:pointer;color: pink;" onclick="openNav()">☰</span>
        </div>

        <div class="overlay" onclick="closeNav()"></div>

        <div class="loAndsear">
            <div class="logo"><img src="./imgs/logo.png" alt="Listen音乐"></div>
            <div class="WebName"><span><a href="./index.html">Listen音乐</a></span></div>
            <input type="text" class="search">
            <button type="submit" value="搜索" class="search-btn">搜索</button>
        </div>
        <div class="panel-box">
            <div class="panel">
                <span><a href="###">音乐人</a></span>
            </div>
            <div class="panel">
                <span><a href="###">音频创作</a></span>
            </div>
            <div class="panel">
                <span><a href="###">VIP会员</a></span>
            </div>
            <span style="color: #ffffff; margin-left: 20px;">|</span>
            <a href="./登录注册/LoginAndRegister.html" target="_self"><button class="login">登录</button></a>

        </div>

    </div>
    <div class="nav-box">
        <div class="nav">
            <div><a href="###">首页</a></div>
            <div><a href="./榜单/榜单.html">榜单</a></div>
            <div><a href="###">听书</a></div>
            <div><a href="###">直播</a></div>
            <div><a href="###">商城</a></div>
            <div><a href="./下载Listen音乐/Download.html">下载Listen音乐</a></div>
            <div><a href="###">商务合作</a></div>
            <div class="dropdown">
                <button class="dropbtn">更多</button>
                <div class="dropdown-content">
                    <a href="#">频道</a>
                    <a href="#">MV</a>
                    <a href="#">歌单</a>
                    <a href="#">歌手</a>
                    <a href="#">专辑</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="contrainer">
        <!-- 轮播图，四张图片自动循环播放 -->
        <div class="banner">
            <div class="warp">
                <div class="item"><img src="./imgs/1.png" alt=""></div>
                <div class="item"><img src="./imgs/2.png" alt=""></div>
                <div class="item"><img src="./imgs/3.png" alt=""></div>
                <div class="item"><img src="./imgs/4.png" alt=""></div>
            </div>
            <div class="div1">
                &lt;
            </div>
            <div class="div2 ">
                &gt;
            </div>
            <!-- 小圆点 -->
            <div class="pagenation">
                <div id="pagenation-item0"></div>
                <div id="pagenation-item1"></div>
                <div id="pagenation-item2"></div>
                <div id="pagenation-item3"></div>
            </div>

        </div>

        <!-- 歌单 -->
        <div class="selectSongsList">
            <div class="songsList">
                <div class="bigSongsList">
                    <div class="title-card">
                        <span>精选歌单</span>
                        <span><a href="#">更多 ></a></span>
                    </div>
                    <div class="big-img">
                        <a href="###">
                            <img src="./imgs/big.jpg" style="width:320px">
                            <span>硬曲！燃起来了！</span>
                        </a>
                    </div>
                </div>
                <div class="smallSongsList">
                    <div class="small-img">
                        <a href="###">
                            <img src="./imgs/s1.jpg" style="width:130px">
                            <span>GD:人间香奈儿</span>
                        </a>
                    </div>
                    <div class="small-img">
                        <a href="###">
                            <img src="./imgs/s2.jpg" style="width:130px">
                            <span>日系轻音：治愈和熙，舒缓心情</span>
                        </a>
                    </div>
                    <div class="small-img">
                        <a href="###">
                            <img src="./imgs/s3.jpg" style="width:130px">
                            <span>2022年公告牌年终榜精选</span>
                        </a>
                    </div>
                    <div class="small-img">
                        <a href="###">
                            <img src="./imgs/s4.jpg" style="width:130px">
                            <span>节奏感十足 听起来又拽拽的英文歌曲</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="hotSongList">
                <div class="hot-title">
                    <div class="title-card2">
                        <span>热门榜单</span>
                        <span><a href="#" style="color: white;">更多 ></a></span>
                    </div>
                    <div class="hotFormList">
                        <div class="hotList">
                            <div class="songForm">
                                <span>飙升榜</span>
                            </div>
                            <div class="song-box">
                                <ol>
                                    <a href="###">
                                        <li><span>周杰伦 - 稻香</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>林俊杰 - 浪漫血液</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>邓紫棋 - 多远都要在一起</span></li>
                                    </a>
                                </ol>
                            </div>
                        </div>
                        <div class="hotList">
                            <div class="songForm">
                                <span>TOP500</span>
                            </div>
                            <div class="song-box">
                                <ol>
                                    <a href="###">
                                        <li><span>张敬轩 - 只是太爱你</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>潘玮柏 - 不得不爱</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>张韶涵 - 隐形的翅膀</span></li>
                                    </a>
                                </ol>
                            </div>
                        </div>
                        <div class="hotList">
                            <div class="songForm">
                                <span>抖音热歌榜</span>
                            </div>
                            <div class="song-box">
                                <ol>
                                    <a href="###">
                                        <li><span>陈奕迅 - 孤勇者</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>于冬然 - 其实都没有</span></li>
                                    </a>
                                    <a href="###">
                                        <li><span>王心凌 - 爱你</span></li>
                                    </a>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 热门歌手 -->
        <div class="singerContainer">
            <div class="singersList">
                <span class="hotsingers">热门歌手</span>
                <hr style="margin-top: 5px;">
                <div class="singerbox">
                    <div>
                        <a href="###">
                            <img src="./imgs/周杰伦.jpg" alt="周杰伦">
                            <span class="singerName">周杰伦</span>
                        </a>
                    </div>
                    <div>
                        <a href="###">
                            <img src="./imgs/林俊杰.jpg" alt="林俊杰">
                            <span class="singerName">林俊杰</span>
                        </a>
                    </div>
                    <div>
                        <a href="###">
                            <img src="./imgs/凤凰传奇.jpg" alt="凤凰传奇">
                            <span class="singerName">凤凰传奇</span>
                        </a>
                    </div>
                    <div>
                        <a href="###">
                            <img src="./imgs/薛之谦.jpg" alt="薛之谦">
                            <span class="singerName">薛之谦</span>
                        </a>
                    </div>
                    <div>
                        <a href="###">
                            <img src="./imgs/陈楚生.png" alt="陈楚生">
                            <span class="singerName">陈楚生</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footer-box">
            <div class="footer-left">
                <div class="footer-left-item">
                    <div class="footer-left-item-title">
                        关于我们
                    </div>
                    <div class="footer-left-item-content">
                        <a href="#">关于我们</a>
                        <a href="#">联系我们</a>
                        <a href="#">合作伙伴</a>
                        <a href="#">加入我们</a>
                    </div>
                </div>
                <div class="footer-left-item">
                    <div class="footer-left-item-title">
                        新手指南
                    </div>
                    <div class="footer-left-item-content">
                        <a href="#">如何下载</a>
                        <a href="#">如何使用</a>
                        <a href="#">如何收藏</a>
                        <a href="#">如何分享</a>
                    </div>
                </div>
                <div class="footer-left-item">
                    <div class="footer-left-item-title">
                        帮助中心
                    </div>
                    <div class="footer-left-item-content">
                        <a href="#">常见问题</a>
                        <a href="#">意见反馈</a>
                        <a href="#">联系客服</a>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="footer-right-item">
                    <div class="footer-right-item-title">
                        新浪微博
                        <img src="./imgs/weibo.png" style="width: 16px;">
                    </div>
                    <div class="footer-right-item-content">
                        <a href="#">新浪微博</a>
                        <a href="#">腾讯微博</a>
                        <a href="#">百度微博</a>
                    </div>
                </div>
                <div class="footer-right-item">
                    <div class="footer-right-item-title">
                        微信公众号
                        <img src="./imgs/wechat.png" style="width: 16px;">
                    </div>
                    <div class="footer-right-item-content">
                        <a href="#">微信公众号</a>
                        <a href="#">腾讯公众号</a>
                        <a href="#">百度公众号</a>
                        <a href="#">小米公众号</a>
                    </div>
                </div>
                <div class="footer-right-item">
                    <div class="footer-right-item-title">
                        联系我们
                    </div>
                    <div class="footer-right-item-content">
                        <a href="#">电话：400-808-8682</a>
                        <a href="#">邮箱：123456@qq.com</a>
                    </div>
                    <div class="beian"><a href="https://beian.miit.gov.cn/#/Integrated/index"
                            target="_blank">粤ICP备2023129256号-1</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <audio controls autoplay>
        <source src="./audio/BUT U.mp3" type="audio/mp3">
    </audio>
    <script src="./JS/index.js"></script>
</body>

</html>